// 旋转动画
@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}


// 页面的样式
html{
    height: 100vh;
}
body{
    height: 100vh;
    width:100%;
    position: relative;
    background-color: #d0d0d0;
}
header{
    // 子绝父相
    position: relative;
    height: 1rem;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    background: url(../images/html_imgs/head_bg.png) no-repeat top center;
    background-size: 100% 100%;
    h1 {
        font-size: .45rem;
        color: #b9b7b7;
        text-align: center;
        line-height: 1rem;
    }
    .showTime {
        position: absolute;
        top: 0;
        right: 0.375rem;
        line-height: 0.9375rem;
        font-size: 0.25rem;
        color: rgba(255, 255, 255, 0.7);
    }
}
.mainbox{
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0.1rem 0.1rem 0;
    width: 100%;
    position: absolute;
    top:1rem;
    bottom: 0rem;
    .topbox{
        height:0.5rem;
        font-size: .25rem;
        color: #333;
        text-align: center;
        line-height: 0.5rem;
    }
    .bottombox{
        width: 100%;
        position: absolute;
        top:0.5rem;
        bottom: 0;
        // 弹性多列布局，左边盒子占2份，右边盒子占3份
        display: flex;
        .bot{
            flex:1;
            padding:.5rem 0 0 0;
            .select_box{
                display: flex;
                /* 主轴居中对齐。 */
                justify-content: center;
            }
            .chart_box{
                width: 50%;
                position: absolute;
                top:1rem;
                bottom:0;
                .chart {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -2.5rem;
                    margin-left: -3.5rem;;
                    z-index: 5;
                    width: 7rem;
                    height: 5rem;
                    img:not([src]){opacity:0;}
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .map{
                    width:100%;
                    height: 100%;
                    position: relative;
                    .map1{
                        position: absolute;
                        // 设置居中垂直对齐
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 6rem;
                        height: 6rem;
                        background: url(../images/html_imgs/map.png) no-repeat;
                        // 让背景图片跟着一起缩放
                        background-size: 100% 100%;
                        opacity: 0.3;
                    }
                    .map2 {
                        position: absolute;
                        width: 7rem;
                        height: 7rem;
                        opacity: 0.5;
                        top: 50%;
                        left: 50%;
                        // transform: translate(-40%, -40%);
                        // 没有这句图片旋转后会出Bug
                        background-size: 100% 100%;
                        background-image: url(../images/html_imgs/jt.png);
                        animation: rotate 10s linear infinite;
                    }
                }
            }
        }
    }
}